<template>
  <view>
    <!-- 2.0.19支持autoBack，默认为false -->
    <u-navbar :fixed="true" leftIconColor="#000" :placeholder="true" titleWidth="0" :autoBack="true">
      <view slot="right" style="width: 630rpx;">
        <u-search :focus="true" :clearabled="true" searchIconColor="#000" searchIconSize="20" height="60rpx"
          shape="square" :showAction="false" @search="search"></u-search>
      </view>
    </u-navbar>

    <!-- 内容主体 -->
    <view class="press-list">
      <view class="press-item" v-for="(item,index) in pressList" :key="index" @click="pressItemClick(item)">
        <view class="display-default press-item-top">
          <!-- 用户头像 -->
          <image class="press-item-top-avatar"
            :src="item.avatar ? $url+item.avatar : '/static/myCenter/defaultAvatar.png'"></image>
          <!-- 用户昵称和咨询分类 -->
          <view class="press-item-top-userNameAndConsultName">
            <!-- 用户昵称 -->
            <view class="display-default">
              <text class="press-item-top-userName">{{item.username}}</text>
              <image style="width: 35rpx;height: 35rpx;margin-left: 10rpx;" v-if="item.username == '校园生活服务平台开发者'"
                src="/static/myIndex/authentication.png"></image>
            </view>
            <!-- 咨询分类 -->
            <text class="press-item-top-consultName">#{{item.consultName}}</text>
          </view>
        </view>
        <!-- 咨询内容 -->
        <view class="press-item-centre">
          <!-- 文字 -->
          <view class="press-item-centre-content">
            <text>{{item.content}}</text>
          </view>
          <!-- 图片 -->
          <view class="display-default press-item-centre-pressImg-list">
            <image class="press-item-centre-pressImg" v-for="(items,index) in item.pressImagesList" :key="index"
              v-if="index < 3" :src="$url+items" mode="aspectFill"
              @click="previewImage(items,item.pressImagesList,index)" @click.stop="!pressItemClick"></image>
            <!-- 有图片，并且里面的图片要大于3张，在第三张图片右上角显示张数 -->
            <view class="press-item-centre-pressImg-imgNum"
              v-if="item.pressImagesList && item.pressImagesList.length > 3">
              共{{item.pressImagesList.length}}张
            </view>
          </view>
        </view>
        <!-- 发布时间、评论数、点赞数 -->
        <view class="press-item-bottom">
          <!-- 格式化后的发布时间 -->
          <view style="color: #7e7e7e;font-size: 11px;">
            <text>
              {{item.publishDateInterval}}
            </text>

            <uni-dateformat v-if="!item.publishDateInterval" :date="item.publishDate" format="yyyy-MM-dd">
            </uni-dateformat>
          </view>
          <view class="display-default">
            <!-- 评论数 -->
            <view class="ddisplay-default press-comment">
              <image class="press-commentAndLike-img" src="../../static/myIndex/comment.svg"></image>
              <text style="color: #7e7e7e;">{{item.commentNum}}</text>
            </view>
            <!-- 点赞数 -->
            <view class="display-default">
              <image class="press-commentAndLike-img" style="" src="../../static/myIndex/give.svg"></image>
              <text style="color: #7e7e7e;">{{item.likeNum}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 共有3种状态选择： -->
    <!-- more：刷新前状态 -->
    <!-- loading：刷新中状态 -->
    <!-- noMore：无数据时的状态 -->
    <uni-load-more
      :style="pressList.length == 0 ? 'height:100rpx;padding-top: 150rpx;' : 'height:200rpx;padding-bottom: 100rpx;'"
      :status="loadStatus" iconType="circle"></uni-load-more>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 咨询列表数据
        pressList: [],
        // 搜索框数据
        searchValue: '',
        // 底部load刷新的状态
        loadStatus: 'noMore',
        pageNum: 1, // 页码
        pageSize: 10, // 每页显示的数量
        total: 0, // 咨询的总条数
      };
    },
    async onReachBottom() {
      // 1.判断是否正在加载其他数据请求
      if (this.isLoading) return
      // 2.页码数(pageNum) * 每页数据(pageSize) >= 总数(total) 以防溢出多余的网络请求，消耗资源
      if (this.pageNum * this.pageSize >= this.total) {
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none',
          position: 'center'
        });
        return
      }

      // 正在加载中...
      this.loadStatus = 'loading'
      this.pageNum++

      await this.searchPress(this.pageNum, this.pageSize)

      // 获取完之后再检测一遍，是否数据已经更新完
      if (this.pageNum * this.pageSize >= this.total) {
        // 没有更多数据了
        this.loadStatus = 'noMore'
      } else {
        // 上拉显示更多
        this.loadStatus = 'more'
      }
    },
    methods: {
      /**
       * @description 用户确定搜索时触发，或者点击软键盘上的搜索也能触发
       * @param {String} e 搜索框内容
       */
      async search(e) {
        // 去除前后空格
        this.searchValue = e.trim()
        console.log("this.searchValue: ", this.searchValue);

        // 搜索内容长度必须大于2
        if (this.searchValue.length < 2) {
          uni.showToast({
            title: '搜索内容至少是2位',
            icon: 'none',
            position: 'center'
          });
          return
        }

        // 正在加载中...
        this.loadStatus = 'loading'

        // 重新搜索需要重新赋值
        this.pressList = []
        this.pageNum = 1
        this.pageSize = 10
        // 拉取数据，从 1，5 开始
        await this.searchPress(this.pageNum, this.pageSize)

        // 判断一下如果总条数total小于this.pageSize，页面<uni-load-more>需要显示 '没有更多数据了'
        if (this.pageSize >= this.total) {
          // 没有更多数据了
          this.loadStatus = 'noMore'
        } else {
          // 上拉显示更多
          this.loadStatus = 'more'
        }
      },
      
      /**
       * @description 根据搜索内容进行全文检索并返回
       * @param {Number} pageNum 页码
       * @param {Number} pageSize 每页显示的数量
       */
      async searchPress(pageNum, pageSize) {
        // 同步（锁定该数据请求，无法被上拉触底函数调用）
        this.isLoading = true

        await this.$http.press.searchPressInfo(this.searchValue, pageNum, pageSize).then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            //  uni.showToast({
            //   title: res.msg,
            //   icon: 'none',
            //   position: 'center'
            // })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          this.total = res.data.total // 获取后端发送的数据条目总数量
          this.pressList = this.pressList.concat(res.data.rows)
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        this.isLoading = false
      },
      
      /**
       * @description 咨询item项点击
       */
      pressItemClick(item) {
        // console.log("item: " + JSON.stringify(item));
        /**
         * 这里出现了错误！！
         * 这个错误直接导致上一页面还能正常显示发布时间，到详情页就消失 NaN
         * 错误回溯：
            url: `/pages/pressDetail/pressDetail?press=${JSON.stringify(item)}`
         * 正确写法：
            url: `/pages/pressDetail/pressDetail?press=${encodeURIComponent(JSON.stringify(item))}`
         * 最后根据字符串比较，发现传参过后时间内少了一个+号，导致NaN，所以传参json类型一定要用encodeURIComponent不然会出问题
         * encodeuricomponent可把字符串作为 URI 组件进行编码。可将一些特殊字符进行转义
         */
        uni.navigateTo({
          url: `/pages/pressDetail/pressDetail?pressId=${item.pressId}`
        })
      },
      
      /**
       * @description 预览多张图片Item点击
       */
      previewImage(imgUrl, imgList, index) {
        let formatImgList = []
        let formatImgUrl = this.$url + imgUrl
      
        for (let i = 0; i < imgList.length; i++) {
          formatImgList.push(this.$url + imgList[i])
        }
      
        uni.previewImage({
          urls: formatImgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: formatImgUrl // 当前显示图片的http链接，默认是第一个
        })
      }
    }
  }
</script>

<style lang="scss">
  // 自定义搜索框样式
  /deep/ .uni-input-placeholder {
    font-size: 12px !important;
  }

  /deep/ .uni-input-input {
    font-size: 12px !important;
  }

  // 列表容器
  .press-list {
    background: #fff;

    // 内容item项
    & .press-item {
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      border-bottom: 1px solid #f0f0f0;

      // 内容头部
      & .press-item-top {
        height: 80rpx;
        margin-bottom: 20rpx;
        justify-content: flex-start;

        // 头像
        & .press-item-top-avatar {
          width: 80rpx;
          height: 100%;
          border-radius: 60px;
          margin-right: 25rpx;
          background: #fff;
        }

        // 用户昵称和咨询分类名称的容器
        & .press-item-top-userNameAndConsultName {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;

          // 用户昵称
          & .press-item-top-userName {
            font-size: 17px;
            // font-weight: 700;
          }

          // 咨询分类名称
          & .press-item-top-consultName {
            font-size: 14px;
            color: #666;
          }
        }
      }

      // 内容主体
      & .press-item-centre {
        margin-bottom: 20rpx;

        // 内容
        & .press-item-centre-content {
          margin-bottom: 20rpx;
          font-size: 16px;
          word-break: break-word; //如果不想单词内断行可以进行单词间的断行
        }

        & .press-item-centre-pressImg-list {
          flex-wrap: wrap;
          justify-content: flex-start;
          position: relative;

          & .press-item-centre-pressImg {
            width: 32.3%;
            margin-right: 1%;
            height: 200rpx;
            border-radius: 10rpx;
          }

          & .press-item-centre-pressImg-imgNum {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            font-size: 11px;
            padding: 0 10rpx;
          }
        }

      }

      // 内容底部
      & .press-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        // 咨询评论
        & .press-comment {
          margin-right: 20rpx;
          display: flex;
          align-items: center;

        }

        // 咨询评论图片、点赞图片
        & .press-commentAndLike-img {
          width: 38rpx;
          height: 38rpx;
          margin-right: 10rpx;
        }
      }
    }

    & .press-item:active {
      background: #f7f7f7;
    }
  }
</style>
